<template>
  <div class="bg-white rounded-lg p-5 shadow-sm h-full flex flex-col">
    <h2 class="text-lg font-medium mb-4!">
      {{ t("system.overview.systemStatusInfo") }}
    </h2>

    <div class="grid grid-cols-2 gap-4 flex-1">
      <!-- 通信状态 -->
      <div>
        <div class="flex items-center gap-2 mb-1">
          <!-- <FluentMdl2Communications class="text-gray-400 w-5 h-5" /> -->
          <div class="text-sm text-gray-500">Communication</div>
        </div>
        <div class="font-medium">
          {{ statusData.communication.status }}
        </div>
      </div>

      <!-- 能源计划 -->
      <div>
        <div class="flex items-center gap-2 mb-1">
          <!-- <SimpleLineIconsEnergy class="text-gray-400 w-5 h-5" /> -->
          <div class="text-sm text-gray-500">Energy Plan</div>
        </div>
        <div class="font-medium">{{ statusData.energyPlan.mode }}</div>
      </div>

      <!-- 电网状态 -->
      <!-- <div>
        <div class="flex items-center gap-2 mb-1">
          <MdiAntenna class="text-gray-400 w-5 h-5" />
          <div class="text-sm text-gray-500">Grid Status</div>
        </div>
        <div class="font-medium">{{ statusData.gridStatus.status }}</div>
      </div> -->

      <!-- 电池SOC -->
      <div>
        <div class="flex items-center gap-2 mb-1">
          <!-- <MageBatteryFull class="text-gray-400 w-5 h-5" /> -->
          <div class="text-sm text-gray-500">Battery SOC (%)</div>
        </div>
        <div class="font-medium">{{ statusData.batterySOC.percentage }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, watch } from "vue";
import { useI18n } from "@/composables/useI18n";

const { t } = useI18n();

const props = defineProps<{
  systemId: string;
}>();

// 从父组件注入共享数据
const systemDetailData = inject<any>('systemDetailData', ref(null));
const systemDetailLoading = inject<any>('systemDetailLoading', ref(false));

const statusData = ref({
  communication: { status: "Unknown" },
  energyPlan: { mode: "Unknown" },
  batterySOC: { percentage: 0 }
});

const loading = ref(false);

// 格式化用电计划模式
const formatCheckModel = (checkModel: number) => {
  if (checkModel === 0) return 'Auto Mode';
  if (checkModel === 1 || checkModel === 2) return 'ZenKi Mode';
  return `Mode ${checkModel}`;
};

// 格式化通信状态
const formatState = (state: number) => {
  if (state === 1) return '正常';
  if (state === 2) return '离线';
  return 'Unknown';
};

// 监听共享数据变化
watch(systemDetailData, (newData) => {
  if (newData) {
    statusData.value = {
      communication: { 
        status: formatState(newData.state || 0) 
      },
      energyPlan: { 
        mode: formatCheckModel(newData.checkModel || 0) 
      },
      batterySOC: { 
        percentage: newData.socLevel || 0 
      }
    };
  }
}, { immediate: true });
</script>
